<template>
  <div class="rich_content">
    <div class="bgC"></div>
    <div class="line-t-30"></div>
    <div class="topMian">
      <div class="aui-flex">
        <div class="aui-user-img">
          <open-data v-if="!userInfo" class="img" type="userAvatarUrl"></open-data>
          <img v-if="userInfo" :src="userInfo.avatar" alt="">
        </div>
        <div v-if="userInfo" class="aui-flex-box">
          <h2>{{userInfo.username}}</h2>
          <p>上次登录时间：{{userInfo.lastlogin}}</p>
        </div>
        <div v-if="!userInfo" @tap="showLoginDialog" class="no-login">立即登录</div>
        <div class="aui-tes" @tap="daySign">
          <button>签到领金币</button>
        </div>
      </div>
      <div class="aui-palace">
        <div class="aui-palace-grid">
          <h2>{{userInfo ? userInfo.copys : 0}}</h2>
          <p>复制</p>
        </div>
        <div class="aui-palace-grid">
          <h2>{{userInfo ? userInfo.favs : 0}}</h2>
          <p>收藏</p>
        </div>
        <div class="aui-palace-grid">
          <h2>{{userInfo ? userInfo.score : 0}}</h2>
          <p>金币</p>
        </div>
      </div>

    </div>
    <div class="aui-list-item">
      <div class="aui-flex b-line" @tap="getCoin()">
        <div class="aui-cou-img">
          <img src="https://oss.ido.icu/images/coin-ico.png?x-oss-process=imgalias/thumb" alt="">
        </div>
        <button class="aui-flex-box" plain="true">
          <p>获取金币</p>
        </button>
        <div class="aui-arrow"></div>
      </div>
      <div class="aui-flex b-line" @tap="gotoShare()">
        <div class="aui-cou-img">
          <img src="https://oss.ido.icu/images/tj-ico.png?x-oss-process=imgalias/thumb" alt="">
        </div>
        <button class="aui-flex-box" open-type="share" plain="true">
          <p>推荐好友</p>
        </button>
        <div class="aui-arrow"></div>
      </div>
      <div class="aui-flex b-line" @tap="gotoQuestions()">
        <div class="aui-cou-img">
          <img src="https://oss.ido.icu/images/wt-ico.png?x-oss-process=imgalias/thumb" alt="">
        </div>
        <button class="aui-flex-box" plain="true">
          <p>常见问题</p>
        </button>
        <div class="aui-arrow"></div>
      </div>

      <div class="aui-flex b-line">
        <div class="aui-cou-img">
          <img src="https://oss.ido.icu/images/kf-ico.png?x-oss-process=imgalias/thumb" alt="">
        </div>
        <button class="aui-flex-box" open-type="contact" plain="true">
          <p>联系客服</p>
        </button>
        <div class="aui-arrow"></div>
      </div>

    </div>
    <LoginDialog v-if="isShowLoginDialog"></LoginDialog>
    <van-dialog id="van-dialog" />
  </div>
</template>

<script>
import {utils} from "../../utils/func";
import LoginDialog from "../../components/login/LoginDialog";
import {API} from "../../api";
import {showToast} from "../../utils";
import Dialog from "../../../dist/wx/@vant/weapp/dist/dialog/dialog";
export default {
  data () {
    return {
      shareInfo:{},
      categorys:[]
    }
  },
  computed:{
    isShowLoginDialog:function () {
      return this.$store.state.showLoginDailog
    },
    isLogin:function (){
      return this.$store.state.isLogin;
    },
    userInfo:function (){
      return this.$store.state.userInfo;
    }

  },



  components: {LoginDialog},

  onShareAppMessage(){
    return this.shareInfo;
  },

  methods: {
    getCoin(){
      Dialog.alert({
        message: '目前获取金币仅通过每日签到获取',
      }).then(() => {
        // on close
      });
    },
    gotoQuestions(){
      this.$router.push({ path: '/pages/questions/main', query: { } });
    },
    showLoginDialog(){
      let _this = this;
      _this.$store.dispatch('showLoginDialog', true);
      //_this.isShowLoginDialog = _this.$store.state.showLoginDailog;
    },
    daySign(){
      let _this = this;
      API.daySign({}).then( res => {
        if(res.code == 200){
          _this.$store.dispatch('userInfo', res.data);
          showToast('签到成功',true);
        } else {
          showToast('今日已签到',false);
        }
      });
    }

  },
  onShow(){
    let _this = this;
    API.getUserInfo({}).then( res => {
      if(res.code == 200){
        _this.$store.dispatch('userInfo', res.data);
        _this.$store.dispatch('isLogin', true);
        _this.$store.dispatch('refreshToken', res.data.token);
        _this.$store.dispatch('showLoginDialog', false);
      }
    });
  },
  mounted() {
    let _this = this;
    API.getUserCategory({}).then( res => {
       if(res.code == 200){
         _this.categorys = res.data.category;
         _this.shareInfo = res.data.shareInfo;
       }
    });
  },


  created () {

  }
}
</script>

<style scoped>
  .bgC{
    width: 100%;
    height: 120px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #f368a1;
  }
  .topMian{
    width: 92%;
    height: auto;
    background: white;
    margin: 0px auto;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 5px 10px #dedede;
  }

  .topMian .aui-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 15px;
    position: relative;
  }

  .topMian .aui-flex .aui-user-img{
    width:70px;
    height: 70px;
    overflow: hidden;
    border-radius: 100px;
    margin-right:20px;
  }
  .topMian .aui-flex .aui-user-img img {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
  }
  .topMian .aui-flex .aui-flex-box {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: #333;
  }
  .topMian .aui-flex .no-login {
    font-size: 20px;
    color: #333;
  }
  .topMian .aui-flex .aui-flex-box h2 {
    font-weight: 500;
    color:#3e3e3e;
    font-size:18px;
    margin-bottom:0;
  }
  .topMian .aui-flex .aui-flex-box p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-overflow: ellipsis;
    font-size: 14px;
    margin-bottom: 0.1rem;
    color: #c4d1d7;
  }

  .topMian .aui-flex .aui-tes button{
    background-color: #ff9c3c;
    background: -webkit-linear-gradient(to right,#ff9c3c, #fb731c);
    background: -o-linear-gradient(to right,#ff9c3c, #fb731c);
    background: -moz-linear-gradient(to right,#ff9c3c, #fb731c);
    background: linear-gradient(to right,#ff9c3c, #fb731c);
    border:none;
    color: #fff;
    border-radius:100px 0px  0px 100px;
    padding:0px 10px;
    font-size:12px;
    position:absolute;
    right:-5px;
    top:20px;
  }


  .topMian .aui-palace {
    padding: 10px 0;
    position: relative;
    overflow: hidden;
  }

  .topMian .aui-palace .aui-palace-grid {
    position: relative;
    float: left;
    padding: 1px;
    width: 33.333%;
    box-sizing: border-box;
    margin: 10px 0;
  }

  .aui-palace-grid h2{
    font-size: 18px;
    font-weight: normal;
    color: #333;
    text-align: center;
  }
  .aui-palace-grid p{
    font-size: 16px;
    font-weight: normal;
    color: #b4cbd5;
    text-align: center;
  }

  .aui-list-item{
    background:white;
    margin:15px auto;
    width: 92%;
  }
  .aui-list-item .aui-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 5px 15px;
    position: relative;
  }
  .aui-list-item .aui-flex.b-line {
    position: relative;
  }

  .aui-list-item .aui-flex .aui-cou-img {
    width: 20px;
    height: 20px;
    margin-right: 11px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: stretch;
  }

  .aui-list-item .aui-flex .aui-cou-img img {
    width: 20px;
    height: 20px;
    display: block;
    border: none;
  }
  .aui-list-item .aui-flex .aui-flex-box {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: #333;
    text-align: left;
    border: 0;
  }
  .aui-list-item .aui-flex .aui-flex-box p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-overflow: ellipsis;
    font-size: 16px;
    color: #676767;
  }
  .aui-list-item .aui-flex .aui-arrow {
    position: relative;
    padding-right: 50px;
    color:#7f8699;
    font-size:0.85rem;
  }

  .aui-list-item .aui-flex .aui-arrow span {
    font-size: 18px;
    color: #9b9b9b;
  }

  .aui-list-item .aui-flex .aui-arrow:after {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #848484;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: absolute;
    top: 50%;
    margin-top: -4px;
    right: 2px;
    border-radius: 1px;
  }


</style>
